// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

.page-tabs {
  --border-size: 5px;
  --tab-hover-border-colour: transparent;
  --tab-active-border-colour: @osu-colour-h1;

  display: flex;
  gap: 20px;
  width: 100%;
  justify-content: center;
  margin-bottom: 1px;
  position: relative;

  &::before {
    content: "";

    position: absolute;
    top: 100%;
    left: 0;

    width: 100%;
    height: 1px;

    background-image: linear-gradient(
      to left,
      transparent 10%,
      @osu-colour-b1 50%,
      transparent 90%
    );
  }

  &--follows {
    max-width: max-content;
    margin: 0 0 10px;
    --border-size: 2px;
    --tab-hover-border-colour: var(--tab-active-border-colour);

    &::before {
      background-image: none;
      background-color: hsl(var(--hsl-d2));
      width: 100%;
      height: var(--border-size);
      top: calc(100% - var(--border-size));
    }
  }

  &__tab {
    margin: 0;
    padding: 5px 0;
    border-bottom: var(--border-size) solid transparent;

    font-size: 14px;
    color: white;

    cursor: pointer;
    position: relative; // so it's above block's ::before

    &:hover,
    &:active,
    &:focus {
      color: @osu-colour-l1;
      text-decoration: none;
      border-bottom-color: var(--tab-hover-border-colour);
    }

    &--active {
      font-weight: 700;
      border-bottom-color: var(--tab-active-border-colour);
      --tab-hover-border-colour: var(--tab-active-border-colour);
    }

    &--disabled {
      color: #ccc;
      cursor: default;

      &:hover,
      &:active,
      &:focus {
        color: #ccc;
        text-decoration: none;
      }
    }
  }
}
